<template>
  <page-view :title="false" >
     <a-card :bordered="false">
      <div class="table-operator">
       <a-button type="primary" v-action:sysResourceAdd @click="handleCreate()">新增</a-button>
     </div>
    <a-table 
    ref="table"
    :columns="columns" 
    :rowKey="record => record.id"
    :dataSource="resourceList" 
    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
    :show-pagination="false">

       <span slot="action" slot-scope="text, record">
          <a style="margin-right:10px;" href="javascript:;"  v-if="$auth('sysResourceEdit')"  @click="handleEdit(record)">编辑</a>
          <a href="javascript:;"  v-if="$auth('sysResourceDelete')"  @click="handleDel(record)">删除</a>
       </span>

      <span slot="type" slot-scope="text">
        {{ text | typeFilter }}
      </span>

    </a-table>

    <sys-resource-modal ref="resourceModal" @ok="handleSaveOk" />

 </a-card>
  </page-view>

</template>
<script>
import SysResourceModal from './SysResourceModal'
import { PageView } from '@/layouts'
import { getResourceList, saveResource, delResource } from '@/api/sys'

export default {
  name: 'SysMenu',
  components: {
    PageView,
    SysResourceModal
  },
  data() {
    return {
      columns,
      visible: false,
      sysResource: {
        type: 1,
        orderNum: 1
      },
      form: this.$form.createForm(this),
      // 加载数据方法 必须为 Promise 对象
      resourceList: [],
      selectedRowKeys: [], // Check here to configure the default column
      selectedRows: []
    }
  },
  methods: {
    handleEdit(record) {
      this.$refs.resourceModal.handleEdit(record)
    },
    handleCreate() {
      this.$refs.resourceModal.handleCreate(this.selectedRows)
    },
    handleDel(record) {
      delResource(record).then(res => {
        if (res.status == 0) {
          this.$message.success('成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleSaveOk() {
      this.loadData()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    loadData() {
      getResourceList().then(res => {
        console.log(res)
        this.resourceList = res.data
      })
    }
  },
  created() {
    this.loadData()
  },
  filters: {
    typeFilter(type) {
      const typeMap = {
        1: '菜单',
        2: '动作'
      }
      return typeMap[type]
    }
  }
}

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    width: '12%'
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: '12%'
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '序号',
    dataIndex: 'orderNum',
    key: 'orderNum'
  },
  {
    title: '授权标识',
    dataIndex: 'permission',
    key: 'permission'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: '30%'
  }
]
</script>
